<!--
 * @FilePath     : /study_code/layui/6-4-3.html
 * @Description  : content 层内容
 * @Date         : 2025-04-08 16:46:28
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-08 20:49:30
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/layui/dist/css/layui.css" />
  </head>
  <body>
    <ul>
      <li><button id="btn0">按钮0</button></li>
      <li><button id="btn1">按钮1</button></li>
      <li><button id="btn2">按钮2</button></li>
      <li></li>
    </ul>

    <div id="contentdom" class="mine-move">可拖拽元素</div>
    <p style="position: fixed; top: 200px; left: 200px">content指定的 DOM</p>

    <script src="/layui/dist/layui.js"></script>
    <script>
      // type参数
      layui.use('layer', function () {
        var layer = layui.layer,
          $ = layui.$

        /**
         * @brief: 设置弹窗内容
         * @value {string|dom|array}
         * {string} 普通 html 内容（会解析 html） ， 示例：'<h2>content参数配置的：普通html内容</h2>'
         * {dom} jq选择器
         * !注意1：最好该元素要存放在 body 最外层（body内一级位置），否则可能被其他的相对元素所影响（下面的 p#contentdom）
         * !注意2：type: 2 时正常； type: 1 时会出现 [object, object]
         * !注意3：作为 dom 的弹窗内容默认应该是隐藏的
         */

        /**
         * @ 页面层 type = 1
         */
        $('#btn0').on('click', function () {
          layer.open({
            type: 1,
            title: '纯文本',
            content: '<h2>主体内容</h2>',
          })
        })

        $('#btn1').on('click', function () {
          layer.open({
            type: 1,
            title: '纯文本',
            content: $('#contentdom'),
          })
        })

        /**
         * @ iframe层
         */
        // 不显示
        $('#btn2').on('click', function () {
          layer.open({
            type: 2,
            // content: 'https://www.ip.top/', //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['https://www.ip.top/', 'no']
            content: ['https://www.ip.top/', 'no'],
          })
        })
      })
    </script>
  </body>
</html>
